<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/record.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend>返佣统计</legend>
        <div class="layui-field-box">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">搜索条件</div>
                        <div class="layui-card-body" pad15>
                            <div class="layui-form-item">
                                <label class="layui-form-label">搜索时间</label>
                                <div class="layui-input-block">
                                    <button class="layui-btn {if condition='$status eq 0'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="0">全部
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 1'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="1">今天
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 2'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="2">本周
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 3'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="3">本月
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 4'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="4">本年
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 5'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm" id="custom">自定义
                                    </button>
                                    <div class="layui-btn {if condition='$status eq 5'}layui-btn-disabled{else/}layui-btn-primary layui-hide{/if} layui-btn-sm" id="test">
                                        {$dateTime}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            返佣数
                            <span class="layui-badge layuiadmin-badge layui-bg-cyan">笔</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.backNum}</p>
                            <p>返佣总笔数<span class="layuiadmin-span-color">{$record.backWholeNum}<i class="layui-icon layui-icon-chart"></i></span></p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            返佣金额
                            <span class="layui-badge layuiadmin-badge layui-bg-orange">元</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.backMoney}</p>
                            <p>返佣总金额<span class="layuiadmin-span-color">{$record.backWholeMoney}<i class="layui-icon layui-icon-chart-screen"></i></span></p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">返佣图表</div>
                        <div class="layui-card-body" pad15>
                            <div id="main" style="width: 100%;height: 400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">返佣记录</div>
                        <div class="layui-card-body" pad15>
                            <table id="demo" lay-filter="demo"></table>
                            <script type="text/html" id="gold">
                                {{d.gold}} ¥
                            </script>
                            <script type="text/html" id="time">
                                {{ formatDateTime(d.time) }}
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script type="text/javascript" src="/static/layuiadmin/layui/layui.js"></script>
<script src="/static/js/echarts.js"></script>
<!-- 引入 walden 主题 -->
<script src="/static/theme/walden.js"></script>
<script>
    layui.config({
        version: true,
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['table', 'laydate'], function () {
        var $ = layui.jquery,
                table = layui.table,
                laydate = layui.laydate;

        //执行渲染
        table.render({
            elem: '#demo',
            url: '/admin/Record/anti_statistics/status/{$status}/dateTime/{$dateTime}',
            method: 'post',
            cols: [[
                {field: 'gold', title: '产生金额', templet: "#gold"},
                {field: 'uid', title: '入账用户'},
                {field: 'content', title: '具体信息'},
                {field: 'time', title: '产生时间', templet: "#time"}
            ]],
            page: {
                limits: [10, 20, 30, 40, 50]
            }
        });

        $('#custom').on('click', function(e){ //假设 test1 是一个按钮
            $("#test").removeClass('layui-hide');//外部事件调用
            laydate.render({
                elem: '#test'
                ,show: true //直接显示
                ,range: true
                ,closeStop: '#custom' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
                ,done: function(value){
                    window.location.href = '/admin/Record/anti_statistics/status/5/dateTime/' + value;
                }
            });
        });

        //条件
        $(".status").click(function () {
            var status = $(this).data('status');
            window.location.href = '/admin/Record/anti_statistics/status/' + status;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'walden');
        var data = '{$data}';
        data = JSON.parse(data);
        var dateList = [];
        var valueGold = [];
        for(var i in data) {
            dateList.push(i);
            valueGold.push(data[i].gold);
        }
        var option = {
            title: {
                text: '返佣金额柱状图标',
            },
            tooltip: {
                trigger: 'axis',
                //在这里设置
                formatter: '{b}: {c}元'
            },
            xAxis: {
                data: dateList
            },
            yAxis: {},
            series: [{
                name: '金额',
                type: 'bar',
                data: valueGold
            }]
        };

        myChart.setOption(option);
    });

    //php时间戳用js转换为yyyy-mm-dd
    function formatDateTime(timeStamp) {
        var date = new Date();
        date.setTime(timeStamp * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    }
</script>
</body>
</html>